<template>
    <el-dialog title="卡券审核" :visible.sync="auditData.dialogState" size="tiny" class="dialog-box">
        <el-form class="form-content" :model="dataForm" ref="dataForm"  label-width="100px"  label-position='right'>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="商品名称：">
                       <span>{{auditData.showData.serviceName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="学校名称：">
                        <span>{{auditData.showData.schoolName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="购买数量：">
                       <span>{{auditData.showData.cardCouponsNum}}张</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="订单销售额：">
                        <span>{{auditData.showData.orderMoney}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="活动价格：">
                        <span>{{auditData.showData.shouldPayMoney}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="开通时长：">
                        <span v-if="auditData.showData.type == '1'">{{auditData.showData.timestore?auditData.showData.timestore:1}}个月</span>
                        <span v-else>{{(auditData.showData.timestore?auditData.showData.timestore:1)*12}}个月</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="公司名称：" >
                        <span>{{auditData.showData.orgUserName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="负责人：" >
                        <span>{{auditData.showData.agentName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="审核状态：" >
                        <span v-if=" auditData.showData.status == '0'">
                            <el-radio class="radio" v-model="dataForm.status" label="1">同意</el-radio>
                            <el-radio class="radio" v-model="dataForm.status" label="0">驳回</el-radio>
                        </span>
                        <span v-if=" auditData.showData.status == '1'" class="success">审核通过</span>
                        <span v-if=" auditData.showData.status == '2'" class="danger">审核拒绝</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if=" auditData.showData.status == '0' && dataForm.status== '0'">
                    <el-form-item label="" prop="reason">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" :maxlength="50" v-model="dataForm.reason" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if=" auditData.showData.status == '2'">
                    <el-form-item label="驳回原因：" >
                        <span>{{!auditData.showData.reason?'暂无驳回原因':auditData.showData.reason}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="auditData.showData.status == '0'">           
            <el-button @click="resetForm('dataForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('dataForm')">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {checkCardCoupons} from 'api/cardCoupons';
    export default {
        props: {
            auditData: {
                default() {
                    return {
                        dialogState: false,
                        showData: {}
                    }
                },
                required: true
            }
        },
        data() {
            // var checkReason = (rule, value, callback) => {
            //     if (!value&&this.dataForm.status=='2') {
            //         return callback(alert('请填写驳回原因！'));
            //     }
            // };
            return {
                dataForm: {
                    status: '1',
                    reason: ''
                }
                // rules: {
                //     reason: [
                //         { validator: checkReason, trigger: 'blur' }
                //     ]
                // }               
            }
        },
        computed: {
            
        },
        methods: {
            submitForm(dataForm) {
                let txt = this.dataForm.status == '1'?'是否确认审核通过？':'是否确认驳回审核？';
                this.$confirm(txt, ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.$refs[dataForm].validate((valid) => {
                        if (valid) {
                            checkCardCoupons(this.auditData.showData.pid, this.dataForm.status, this.dataForm.reason).then(response => {
                                this.$message.success(response.data.errorMsg);
                                this.auditData.dialogState = false;
                                this.$emit('search');
                                this.$refs[dataForm].resetFields();
                                this.dataForm.status = '1'; 
                            }).catch(() => {
                                this.dataForm.status = '1';
                                this.$refs[dataForm].resetFields();
                            })
                        }
                    })                                     
                }).catch(() => {
                    this.dataForm.status = '1';
                    this.$refs[dataForm].resetFields(); 
                    this.$message({
                        type: 'info',
                        message: '已取消审核'
                    });                            
                });
            },
            resetForm(dataForm) {
                this.auditData.dialogState = false;
                this.$refs[dataForm].resetFields();
                this.dataForm.status = '1';
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });              
            }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../../styles/var';
    .dialog-box{
        .el-dialog__header{
            text-align:center;
            background:#f7f7f9;
            height:54px;
            .el-dialog__title{
                font-size:20px;
                color:#333;
            }
        }
        .form-content{
            font-size: 12px;
            color: #333;
            width: 80%;
            margin: 0 auto; 
            .success{
                color: $success;
            }
            .danger{
                color: $danger;
            }
        }
        .dialog-footer{
            text-align:center;
        }
    }
</style>